<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JQueryscprit:核心语法+DOM（针对页面操作）+BOM(针对浏览器)
		 学习主体：针对页面操作比较多---DOM操作
		 JQuery操作DOM：理解：JQ框架改变页面内容效果
		 js基础就可以直接学习，了解函数使用
		 基础函数------事件源之后出现，事件源语法糖中
		 html().			作用：增加一个元素，覆盖原有html
		 val()              作用：针对input元素，实现修改文本框内容
		 text()				作用：生成文本内容
		 
		 -->
		 <script src="./js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，下面 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti asperiores adipisci fugit molestiae eos nemo, vitae illo sed, cupiditate dolor facilis, aspernatur blanditiis natus dolore laudantium odit nostrum modi nihil!</p>
		
		<div style="width:200px;height:200px;background-color: #000;"></div>
		<h3>lorem</h3>
		<input type="button" value="按钮2" />
		<input type="text" value="输入可以直接写文本" />
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/* 练习1：div 200*200 背景 黑 下面有一行文本 鼠标划归之后
			 下面内容修改
			 */
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>");
			});
			/* 练习2：按钮 文本框  点击按钮，文本框增加一行文本 */
			$("input[type='button']").click(function(){
			 //alert("jq是否选中")
			 $("input[type='text']").val("文本框内容修改~");
			});
			/* 利用JQ操作DOM（页面效果）：元素内容操作【3个函数】
									属性操作(四个函数)
									样式操作（四个函数）
									元素样式操作（五个函数）
									插入和删除操作【7个函数】
									元素遍历操作（6个函数）
									JQ动画操作（七个函数）
			 */
			
		</script>
	</body>
	
</html>